<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—个人中心</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <link rel="stylesheet" href="../CSS/OutCSS/AdoptionCenter/elementUI.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <script src="../JS/jQuery.min.js"></script>
    <link rel="stylesheet" href="../CSS/userCenter.css">
    <!-- 引入样式 -->

</head>
<body>
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
        <!-- mask登录需要作为背景强调登陆框 -->
        <div class="mask"></div>
            <div class="logo">宠物收容所</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="AdoptionCenter.html">领养中心</a></li>
                <li><a href="PetKnowledge.html">宠物知识</a></li>
                <li><a href="TeamActivities.html">团队活动</a></li>
                <li><a href="BeVolunteer.html">成为志愿者</a></li>
                <li><a href="Donate.html">捐助</a></li>
            </ul>
            <div  class="nav-login" v-show="user_id">
            <div class="Avater">
                <ul>
                <li><img :src="logginMessage.user_avater_url" alt=""></li>
                <li><div>{{this.logginMessage.userlogin_name}}</div></li>
                <li
                style="
                color: #fff;
                background-color: rgb(13, 8, 8);
                padding: 10px 10px;
                border-bottom: 2px solid #eee ;
                "
                ><div><a href="userCenter.html">用户中心</a></div></li>
                <li @click="outLogin">退出登录</li>
                </ul>
            </div>
            </div>
    
    
    
    
            <div class="nav-login" v-show="!user_id" @click="Loginhandle">
                <ul>
                    <li><a href="javascript:;">
                        <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                    </a></li>
                    <li><a href="javascript:;">登录/注册</a></li>
                </ul>
            </div>
    
            <div class="login-box">
            <div class="Login">
                <div class="owl" id="owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
            <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
            <form action="">
                <div>
                    <span class="iconfont icon-yonghu"></span>
                    <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
                </div>
                <div>
                    <span class="iconfont icon-ttubiao_password"></span>
                    <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
                </div>
                
                <!-- <button @click="loginButton">提交</button> -->
                <span @click="loginButton" style="color: #fff;
                background-color: #20b2aa;
                height: 50px;
                width: 150px;
                text-align: center;
                font-size: 1.2rem;
                line-height: 50px;
                border-radius: 3px;
                ">提交我</span>
            </form>
            <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
    
            <div class="Register"  style="display: none;">
    
                <div class="owl" id="reowl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
                <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
                <el-row>
                <el-col>
                    <el-form 
                    status-icon 
                    :inline="true" 
                    label-width="0px" 
                    :model="registerMessage" 
                    ref="registerMessage" 
                    class="demo-ruleForm" 
                    :rules="rules" 
                    
                    >
                        <div>
                            <span class="iconfont icon-email"></span>
                            <el-form-item label="" prop="user_email">
                            <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dianhua"></span>
                            <el-form-item label="" prop="user_phone">
                            <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <span class="iconfont icon-yonghu"></span>
                            <el-form-item label="" prop="user_name">
                                <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dizhi"></span>
                            <el-form-item label="" prop="user_address">
                                <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                            </el-form-item>
                        
                        </div>
                        <div>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password">
                            <el-input placeholder="密码" 
                            autocomplete="off" 
                            id="registerpass1" 
                            v-model="registerMessage.user_password" 
                            type="password" 
                            show-password
       
                            ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password_again">
                            <el-input placeholder="再次输入密码" 
                            autocomplete="off" 
                            id="registerpass" 
                            v-model="registerMessage.user_password_again" 
                            type="password" 
                            show-password
                            
                            
                            ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-input
                            style="
                            height: 10vh;
                            "
                            type="textarea"
                            placeholder="介绍一下自己吧"
                            v-model="registerMessage.user_info"
                            maxlength="60"
                            show-word-limit
                            style="font-size: 1.5rem;
                                height: 15vh;
                            "
                            >
                            </el-input>
                        </div>
                        <div style="color: #000;">
                            <template>
                            是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                            <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                            </template>
                        </div>
            <div style="color: #000;
            border: 1px #ccc solid;
            ">
            
            <el-upload
                class="upload-demo"
                drag
                action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
                name="imgFile"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                multiple 
                
                >
                <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
                <i v-else class="el-icon-upload"
                style="
                    font-size: 67px;
                    color: #C0C4CC;
                    margin: 16px 0 16px;
                    line-height: 50px;
                "
                >
                <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </i>
                
            </el-upload>
            </div>
            
            <div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerMessage')"
                        style="width: 15vw;"
                    >提交</el-button>
                    <el-button @click="resetForm('registerMessage')"
                        style="width: 15vw;"
                    >重置</el-button>
                </el-form-item>
            </div>
    
                    </el-form>
                </el-col>
                </el-row>
                <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
            </div>
             <div class="burger">
                 <div class="top-line"></div>
                 <div class="middle-line"></div>
                 <div class="bottom-line"></div>
             </div>
    </nav>


      <!-- =============网页内容设计=============== -->
      <div class="container" id="webContainer">
        <div class="wrapper">
            <div class="header">
                <img :src="userMessage.user_photo" alt="" class="avater">
                <div>
                    <button class="modifyBtn" @click="userMsgModify">点击修改个人信息</button>
                </div>
                <div class="main">
                   <div class="top">
                        <div>用户名：{{changeUserMessage.user_name}}</div>
                        <div>邮箱：{{changeUserMessage.user_email}}</div>
                   </div>
                   <div class="bottom">
                        <div>默认地址：{{changeUserMessage.user_address}}</div>
                        <div>电话：{{changeUserMessage.user_phone}}</div>
                   </div>
                </div>
            </div>

            <div class="change">
                <div class="main" >
                   <span @click="closeBtn" id="closeBtn"
                    style="z-index: 999;"
                   >X</span>
                    
                   <!-- <el-form-item label="审批人">
                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                  </el-form-item> -->
                
                    <el-container style="
                        background-color: #eee;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    ">
                        <el-row>
                            <el-col>
                                <el-form 
                                :inline="true" 
                                label-width="100px" 
                                class="demo-ruleForm"
                                :model="userMessage" 
                                ref="userMessage" 
                                :rules="rules" 
                                >
                                    
                                    <el-form-item label="用户名" prop="user_name">
                                        <el-input v-model.trim="userMessage.user_name" placeholder="请输入用户名"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址：" prop="user_address">
                                        <el-input v-model.trim="userMessage.user_address" placeholder="请输入地址"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话：" prop="user_phone">
                                        <el-input v-model.trim="userMessage.user_phone" placeholder="请输入电话"></el-input>
                                    </el-form-item>
                                    <el-form-item label="邮箱：" prop="user_email">
                                        <el-input v-model.trim="userMessage.user_email" placeholder="请输入邮箱"></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户头像" prop="user_photo" 
                                        
                                    >
                                        <el-upload
                                            class="upload-demo"
                                            drag
                                            action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
                                            name="imgFile"
                                            :on-success="uploadSuccess"
                                            :before-upload="beforeUpload"
                                            style="
                                                background-color: #eee;
                                            "
                                        >
                                            <img v-if="userMessage.user_photo" :src="userMessage.user_photo" alt=""
                                            style="
                                            height: 120px;
                                            width: 120px;
                                            border-radius: 50%;
                                            
                                            "   
                                        >
                                            <i class="el-icon-upload">
                                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                            </i>
                                            
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm('userMessage')"
                                            style="width: 15vw;"
                                        >修改信息</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>




                        

                    </el-container>




                   
                </div>
            </div>

            <div class="AdoptedPetShow">
                <h1 v-if="!BeAdopted.length">你还没有领养任何宠物哦！快去领养中心看看吧！</h1>
                <h1 v-if="BeAdopted.length">下面是你领养的小可爱！！！</h1>
                <div v-if="BeAdopted.length" class="cardshow">
                    <ul>
                        <li v-for="pet in BeAdopted" id="petCard" @click="goPetDetail(pet)"> 
                            <img :src="pet.pet_img" alt="">
                            <div class="description">
                              <h2>姓名：{{pet.pet_name}}</h2>
                              <h3>年龄：{{pet.pet_age}}岁</h3>
                              <h3>类型：{{pet.pet_type_name}}</h3>
                              <span class="iconfont icon-crown-fill"></span>{{pet.pet_hot}}
                            </div>
                        </li>
                      </ul>
                </div>
            </div>

           
        </div>

       

      </div>





      <!-- =============网页内容设计结束=============== -->

    <!-- 以下为网页底部设计  -->
    <footer id="footer">
        <div class="content">
            <div class="top">
                <div class="logo" style="color: #000;">
                    <h1>宠物收容所</h1>
                </div>
            </div>
            <div class="middle">
                <div class="left">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                        <li><a href="">公告</a></li>
                        <li><a href="">我们的未来</a></li>
                        <li><a href="">领养帮助</a></li>
                        <li><a href="">信息归档</a></li>
                        <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                    </ul>
                    </div>
                    <div class="right">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                        <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                        <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                        <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">免责声明</a></li>
                    </ul>
                    </div>
                    <div class="wechat" style="padding-left: 2vh;">
                    <h2>关注我们</h2>
                    <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                        <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                    </div>
            </div>
            <div class="bottom">
                <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
            </div>
        </div>
    </footer>
</body>

<script src="../JS/jQuery.min.js"></script>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 导入axios -->
<script src="../JS/axios.js"></script>


<script src="../JS/userCenter.js"></script>





</html>